<template>
  <view class="health-container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">健康档案</text>
      <text class="subtitle">管理您的就诊人健康信息</text>
    </view>

    <!-- 就诊人列表 -->
    <view class="patient-list">
      <view v-if="loading" class="loading">
        <text>加载中...</text>
      </view>
      
      <view v-else-if="patientList.length === 0" class="empty">
        <text>暂无就诊人信息</text>
        <button class="add-btn" type="primary" @click="goToAddPatient">添加就诊人</button>
      </view>
      
      <view v-else class="list-content">
        <view 
          v-for="(patient, index) in patientList" 
          :key="patient.id || index"
          class="patient-card"
          @click="viewPatientDetail(patient)"
        >
          <!-- 基本信息 -->
          <view class="patient-header">
            <view class="patient-avatar">
              <text class="avatar-text">{{ patient.name.charAt(0) }}</text>
            </view>
            <view class="patient-info">
              <text class="name">{{ patient.name }}</text>
              <text class="basic-details">
                {{ getGenderText(patient.gender) }} | {{ patient.age }}岁
              </text>
            </view>
            <view class="arrow">></view>
          </view>
          
          <!-- 健康指标概览 -->
          <view class="health-overview">
            <view class="health-item" v-if="patient.height && patient.height !== '未测量'">
              <text class="label">身高：</text>
              <text class="value">{{ patient.height }}cm</text>
            </view>
            <view class="health-item" v-if="patient.weight && patient.weight !== '未测量'">
              <text class="label">体重：</text>
              <text class="value">{{ patient.weight }}kg</text>
            </view>
            <view class="health-item" v-if="patient.bloodPressure && patient.bloodPressure !== '未测量'">
              <text class="label">血压：</text>
              <text class="value">{{ patient.bloodPressure }}</text>
            </view>
            <view class="health-item" v-if="patient.bloodSugar && patient.bloodSugar !== '未测量'">
              <text class="label">血糖：</text>
              <text class="value">{{ patient.bloodSugar }}</text>
            </view>
          </view>
          
          <!-- 操作按钮 -->
          <view class="actions">
            <button class="action-btn edit" size="mini" @click.stop="editPatient(patient)">编辑</button>
            <button class="action-btn detail" size="mini" @click.stop="viewPatientDetail(patient)">详情</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加就诊人按钮 -->
    <view class="floating-add" v-if="patientList.length > 0">
      <button class="add-btn" type="primary" @click="goToAddPatient">+</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Health',
  data() {
    return {
      loading: false,
      patientList: []
    }
  },
  
  onLoad() {
    this.getPatientList()
  },
  
  onShow() {
    this.getPatientList()
  },
  
  methods: {
    // 获取就诊人列表
    async getPatientList() {
      this.loading = true
      try {
        const token = uni.getStorageSync('token')
        if (!token) {
          uni.showToast({
            title: '请先登录',
            icon: 'none'
          })
          return
        }
        
        const response = await uni.request({
          url: 'http://localhost:8080/patient/list',
          method: 'GET',
          header: {
            'Authorization': `Bearer ${token}`
          }
        })
        
        if (response.data.code === 200) {
          this.patientList = response.data.data || []
        } else {
          uni.showToast({
            title: response.data.message || '获取就诊人列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '获取就诊人列表失败',
          icon: 'none'
        })
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    
    // 获取性别文本
    getGenderText(gender) {
      const genderMap = {
        1: '男',
        2: '女',
        3: '其他'
      }
      return genderMap[gender] || '未知'
    },
    
    // 跳转到添加就诊人页面
    goToAddPatient() {
      uni.navigateTo({
        url: '/pages/patient/add-patient'
      })
    },
    
    // 跳转到编辑就诊人页面
    editPatient(patient) {
      uni.navigateTo({
        url: `/pages/patient/edit-patient?id=${patient.id}`
      })
    },
    
    // 查看就诊人详情
    viewPatientDetail(patient) {
      uni.navigateTo({
        url: `/pages/health/patient-detail?id=${patient.id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.health-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
  
  .title {
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.patient-list {
  .loading, .empty {
    text-align: center;
    padding: 100rpx 0;
    color: #999;
    
    .add-btn {
      margin-top: 30rpx;
      width: 200rpx;
    }
  }
}

.patient-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.patient-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  .patient-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    
    .avatar-text {
      color: white;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  
  .patient-info {
    flex: 1;
    
    .name {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .basic-details {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  .arrow {
    color: #ccc;
    font-size: 32rpx;
  }
}

.health-overview {
  margin-bottom: 20rpx;
  
  .health-item {
    display: flex;
    margin-bottom: 10rpx;
    
    .label {
      font-size: 26rpx;
      color: #666;
      width: 120rpx;
    }
    
    .value {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  
  .action-btn {
    &.edit {
      background: #007aff;
      color: white;
    }
    
    &.detail {
      background: #34c759;
      color: white;
    }
  }
}

.floating-add {
  position: fixed;
  right: 40rpx;
  bottom: 40rpx;
  
  .add-btn {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    font-size: 48rpx;
    line-height: 100rpx;
    padding: 0;
    box-shadow: 0 8rpx 30rpx rgba(0, 122, 255, 0.3);
  }
}
</style>

